<template>
  <div class="goods">
    <div
      class="menu-wrapper"
      :style="`height:${clientHeight}px`"
      ref="menuScroll"
    >
      <ul>
        <li
          @click='chickLi(index,item)'
          :class='index==indexCkick?"active":""'
          v-for='(item,index) in tableft'
          :key="index"
        >{{item.title}}</li>
      </ul>
    </div>
    <div
      class="type-box"
      ref="foodWrapper"
    >
      <!-- <div class="title">全部</div> -->
      <div
        class="content"
        v-for='(item,index) in commonList'
        :key="index"
      >
        <div class="typename"  @click='aaa(index,item)'  :class="item.is_types === 1 ? 'add-active ' : ''">{{item.title}}</div>
        <!-- <div class="typeico" >
          <img
            :src="item.ischecked ? checked : nochecked"
            alt=""
          ></div> -->
      </div>
    </div>
  </div>

</template>

<script>
// import BScroll from 'better-scroll'
import {
  info,
  addHobby
} from '@/api/information'
import {
  mapState
} from 'vuex'
export default {
  created () {
    console.log(4 % 2)
    this.getinfo()
  },
  data () {
    return {
      indexs: '',
      clientHeight: '',
      tableft: '',
      checked: 'http://o6wndwjxn.qnssl.com/4c062201901121634064002.svg',
      nochecked: 'http://o6wndwjxn.qnssl.com/8f8f7201901121633499852.svg',
      indexCkick: 0,
      labelPosition: '',
      commonList: [],
      checklist001: ['China']
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      openid: state => state.openid
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.clientHeight = document.documentElement.clientHeight
      this.initScroll()
    })
  },
  methods: {
    getinfo () {
      let prams = {
        classification_id: 0,
        type: 1,
        user_id: this.user_id
      }
      info(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          res.data.data.classification.splice(0, 1)
          this.tableft = res.data.data.classification
          this.chickLi(0, this.tableft[0])
          console.log(this.tableft)
        }
      })
    },
    initScroll () {
      // this.menuScroll = new BScroll(this.$refs.menuScroll, {
      //   click: true
      // })
      // this.foodWrapper = new BScroll(this.$refs.foodWrapper, {
      //   click: true
      // })
    },
    chickLi (index, item) {
      this.indexCkick = index
      let prams = {
        classification_id: item.classification_id,
        type: 2,
        user_id: this.user_id
      }
      info(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200) {
          res.data.data.classification.splice(0, 1)
          res.data.data.classification.forEach(element => {
            if (element.is_types === 1) {
              element.ischecked = true
            } else {
              element.ischecked = false
            }
          })
          this.commonList = res.data.data.classification
        }
      })
      console.log(item)
    },
    aaa (i, item) {
      this.indexs = i
      console.log(item.ischecked)
      let obj = {
        member_id: this.user_id,
        towid: item.classification_id,
        is_types: item.ischecked ? 1 : 2
      }
      console.log(obj)
      addHobby(obj).then((res) => {
        if (res.data.code === 200) {
          if (this.commonList[i].is_types === 1) {
            this.commonList[i].is_types = 2
          } else {
            this.commonList[i].is_types = 1
          }
        }
      })
    }

  },
  watch: {
    searchgoods () {
      // 监听数据
      this.$nextTick(() => {
        // 左右两边滚动
        this._initBScroll()
        this._initRightHeight()
      })
    }
  }

}
</script>

<style scoped>
.goods {
  width: 100%;
  display: flex;
  overflow: hidden;
}
.menu-wrapper {
  background: #f5f5f5;
  display: flex;
  border-right: 1px solid #e6e6e6;
}

.menu-wrapper ul li {
  width: calc(100vw * 220 / 750);
  height: 40px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
  color: #333333;
  line-height: 40px;
  text-align: center;
}

.wrapper {
  width: 100%;
  background: #ffffff;
  font-size: 12px;
  color: #666666;
  line-height: 44px;
  padding: 14px 38px;
}

.active {
  width: 80px;
  height: 40px;
  background-color: #fff;
  border-left: solid 4px #F39800;
  color: #f29911 !important;
  overflow: hidden;
  box-sizing: border-box;
}

.title {
  width: 80px;
  height: 42px;
  line-height: 30px;
}
.type-box {
  /* justify-content: space-between; */
  padding-top: 28px;
  padding-left: calc(100vw * 40 / 750);
  padding-right: calc(100vw * 40 / 750);
}
.content {
  display: inline-block;
  width: 50%;
  position: relative;
}
.typename {
  font-size: 14px;
  color: #000000;
  margin-bottom: calc(100vw * 20 / 750);
  width: calc(100vw * 212 / 750);
  height: calc(100vw * 72 / 750);
  background: #f5f5f5;
  border-radius: 4px;
  font-family: PingFangSC-Regular;
  text-align: center;
  line-height: calc(100vw * 72 / 750);
}
.type-box .content:nth-child(2n) > .typename{
    margin-left: calc(100vw * 12 / 750);
}
.add-active{
  background-color: rgba(255,225,175,0.8);
  color: #F39800;
  background-image: url('http://o6wndwjxn.qnssl.com/8cec120190305115333347.png');
  background-repeat: no-repeat;
  background-size: calc(100vw * 40 / 750) calc(100vw * 36 / 750);
  background-position: 100% 100%;
}
.typeico {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
}
.actue{
  background-color: #fcc;
}
.typeico > img {
  width: 13px !important;
  height: 13px;
}
</style>
